<template>
  <div>
    <!-- 搜索栏 -->
    <search-bar
      :options="searchBarOptions"
      style="padding-top:0;"
    />

    <!--分割线-->
    <div class="line"></div>

    <!-- 表格栏 -->
    <div class="table-box">
      <!--tab栏-->
      <div class="el_table_div" style="padding:10px 0 0;">
        <el-tabs v-model="activeName" @tab-click="switchTab">
          <el-tab-pane
            v-for="(item, index) in optionsTabByPartner"
            :key="index"
            :name="String(item.value)"
            v-if="!item.disabled"
            :label="item.label"
          >
          </el-tab-pane>
        </el-tabs>
      </div>
      <!--表格-->
      <fast-table :options="fastTableOptions" :data="page.records" />
      <!-- 分页 -->
      <pagination
        :total="page.total"
        :current="page.current"
        :size="page.size"
        @changePageSize="changePageSize"
        @changePageNum="changePageNum"
      />
    </div>
  </div>
</template>
<script>
import page from '@/mixins/page'
import FastTable from '@/components/fast-table.vue'
import SearchBar from '@/components/search-bar.vue'
import pagination from '@/components/pagination.vue'

export default {
  components: { FastTable, SearchBar, pagination },
  mixins: [page],
  data () {
    return {
      fastTableOptions: {
        columns: [
          {
            label: this.$t('m.serialNumber'),
            prop: 'orderNo',
            formatter: row => this.$format.strFormat(row.orderNo)
          },
          {
            label: this.$t('m.Partner'),
            prop: 'type',
            formatter: row =>
              this.$format.strFormat(
                this.$format.stateFormat(row.type, this.optionsTabByPartner)
              )
          },
          {
            label: this.$t('m.Partner_name'),
            prop: 'name',
            formatter: row => this.$format.strFormat(row.name)
          },
          {
            label: this.$t('m.Shop_Details_Contact'),
            prop: 'phone',
            formatter: row => this.$format.phoneFormat(row.phone, row.code)
          },
          {
            label: this.$t('m.applyWithdrawalAmounts'),
            prop: 'amount',
            formatter: row => this.$format.amountFormat(row.amount)
          },
          // {
          //   label: this.$t('m.cashAccount'),
          //   prop: 'cardNo',
          //   formatter: row => this.$format.strFormat(row.cardNo)
          // },
          {
            label: this.$t('m.Finance_Withdrawal_date'),
            prop: 'createTime',
            formatter: row => this.$format.dateformat(row.createTime)
          },
          {
            label: this.$t('m.Actionby'),
            prop: 'auditName',
            formatter: row => this.$format.strFormat(row.auditName)
          },
          {
            label: this.$t('m.withdrawStatus'),
            prop: 'state',
            formatter: row =>
              this.$format.strFormat(
                this.$format.stateFormat(row.state, this.withdrawState)
              )
          },
          {
            label: this.$t('m.Finance_Remarks'),
            prop: 'remark',
            formatter: row => this.$format.strFormat(row.remark)
          },
          {
            label: this.$t('m.Order_Review_Date'),
            prop: 'auditTime',
            formatter: row => this.$format.dateformat(row.auditTime)
          }
        ]
      },
      params: {
        // 状态：0-申请中 1-已结算 2-驳回申请
        state: '1,2',
        // 类型: 2-代理 3-业务员 4-网点
        type: '',
        auditState: ''
      },
      activeName: '',

      // 	类型: 2-代理 3-业务员 4-网点
      optionsTabByPartner: [
        { value: '', disabled: false, label: this.$t('m.all') },
        { value: '4', disabled: false, label: this.$t('m.Merchant_') },
        {
          value: '2',
          disabled: this.getAgentLevel() == 2,
          label: this.$t('m.Franchisee2')
        }
      ],

      //提现状态
      withdrawState: [
        {
          value: '',
          label: this.$t('m.all')
        },
        // {
        //   value: 0,
        //   label: '申请中'
        // },
        {
          value: 1,
          label: this.$t('m.branch_Pass')
        },
        {
          value: 2,
          label: this.$t('m.branch_Reject')
        }
      ]
    }
  },
  watch: {
    'params.type' (newval, oldval) {
      // 代码实现
      // console.log(newval);
      if (newval == '' || newval == 0) {
        this.activeName = '0'
      }
    }
  },
  created () {
    this.getSearchBar()
    this.getPage()
  },
  methods: {
    getSearchBar () {
      this.searchBarOptions = {
        search: this.search,
        bars: [
          {
            value: '',
            type: 'input',
            prop: 'search',
            placeholder: [
              this.$t('m.serialNumber'),
              this.$t('m.Partner_name'),
              this.$t('m.Shop_Details_Contact')
            ].join(' / ')
          },
          {
            value: '',
            type: 'datePicker',
            prop: 'rangeTime',
            label: this.$t('m.Finance_Withdrawal_date')
          },
          {
            value: '',
            type: 'select',
            prop: 'auditState',
            label: this.$t('m.withdrawStatus'),
            options: this.withdrawState
          }
        ]
      }
    },

    getPage () {
      this.$api.finance.getWithdrawList(this.params, this.page).then(res => {
        if (this.$ok(res)) {
          this.page = res.data
        }
      })
    },

    switchTab (tab) {
      this.params.type = tab.name == 0 ? '' : tab.name
      this.page = this.$options.data.call(this).page
      this.getPage()
    },

  }
}
</script>
<style scoped lang="scss"></style>
